<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格布局</title>
    <link rel="stylesheet" href="./table.css">
</head>
<body>
    <h4>css表格</h4>
    <div class="table">
        <section>
            <ul>
                <li>编号</li>
                <li>标题</li>
            </ul>
        </section>
        <section>
            <ul>
                <li>1</li>
                <li>标题1</li>
            </ul>
        </section>
        <section>
            <ul>
                <li>2</li>
                <li>标题2</li>
            </ul>
        </section>
    </div>

    <hr style="margin: 30px;">
    <h4>html标签表格</h4>

    <table>
        <caption>课程介绍</caption>
        <thead>
            <tr>
                <td>编号</td>
                <td>标题</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>标题1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>标题2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总计：</td>
                <td>100</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>